/* eslint-disable no-unused-vars */
<template>
  <div>
    <div class="form">
      <el-row>
        <el-col :span="13">
          <el-form
            ref="searchForm"
            :model="searchForm"
            inline
            label-position="top"
          >
            <!-- 堆场编号 -->
            <el-form-item
              :label="$t('message.ContainerYardNo')"
              prop="containerYardNo"
              required
            >
              <el-select v-model="searchForm.containerYardNo">
                <el-option
                  v-for="item in containerYardNoOpts"
                  :key="item.dictKey"
                  :label="item.dictKey "
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 作业类型 -->
            <el-form-item label="作业类型" prop="containerWorkingStatus">
              <el-select v-model="searchForm.containerWorkingStatus">
                <el-option
                  v-for="item in containerWorkingStatusOpts"
                  :key="item.dictKey"
                  :label="item.dictKey "
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <!-- 搜索箱号 -->
            <el-form-item label="" prop="containerNo">
              <el-input
                v-model="searchForm.containerNo"
                @focus="focusOne"
                id="conIup"
                readonly
                ref="conIup"
              >
              </el-input>
            </el-form-item>
            <!-- 结果中搜索 -->
            <el-form-item label="" prop="resultStr">
              <el-input
                v-model="searchForm.resultStr"
                @focus="focusTwo"
                id="resIup"
                readonly
                ref="resIup"
              >
                <el-button slot="append" type="primary" @click="resultSearchFn">
                  结果中按箱搜索</el-button
                >
              </el-input>
            </el-form-item>
            <!-- 按钮 -->
            <el-form-item label="">
              <el-button type="primary" @click="resetSearchForm"
                >重置</el-button
              >
              <el-button type="primary" @click="searchFn"> 箱号</el-button>
              <el-button type="primary" @click="outvehicleNumberFn"
                >车号</el-button
              >
            </el-form-item>
            <el-form-item label="">
              <el-button type="primary" @click="dataPositionFn">确定</el-button>
              <el-button type="primary" @click="removeFn">键盘</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <!-- <el-col :span="11">
          <Keyboard
            class="keyboard"
            @strFn="strFn"
            :setFn="setFn"
            :removeFn="removeFn"
            :show="true"
            :width="50"
          />
        </el-col> -->
      </el-row>
    </div>
    <div class="table" v-if="false">
      <el-table
        :data="tableData"
        size="mini"
        @row-click="rowClickFn"
        highlight-current-row
      >
        <el-table-column prop="containerNo" label="箱号" width="110">
        </el-table-column>
        <el-table-column prop="planningNo" label="计划号" width="120">
        </el-table-column>
        <el-table-column prop="vehicleNumber" label="车号"> </el-table-column>
        <el-table-column prop="containerLocation" label="箱位" width="120">
          <template slot-scope="scope">
            <span style="color:green"
              >{{
                scope.row.containerLocation
                  ? scope.row.containerLocation.substr(0, 3)
                  : ""
              }}
            </span>
            <span style="color:purple"
              >{{
                scope.row.containerLocation
                  ? scope.row.containerLocation.substr(3, 3)
                  : ""
              }}
            </span>
            <span style="color:blue"
              >{{
                scope.row.containerLocation
                  ? scope.row.containerLocation.substr(6, 3)
                  : ""
              }}
            </span>
            <span>{{
              scope.row.containerLocation
                ? scope.row.containerLocation.substr(9, 1)
                : ""
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="containerOwner" label="箱公司">
        </el-table-column>
        <el-table-column prop="containerType" label="箱型"> </el-table-column>
        <el-table-column prop="containerDimension" label="尺寸">
        </el-table-column>
        <el-table-column prop="emptyOrHeavy" label="空重标识">
        </el-table-column>
        <el-table-column prop="timeArrivingHarbor" label="抵港日期">
        </el-table-column>
        <el-table-column
          prop="firstInboundType"
          label="首次运输方式"
          width="100px"
        >
          <template>
            <!-- <span>
              {{
                scope.row.firstInboundType | DicJson("transportation_type")
              }}</span -->
            >
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="备注"> </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          :layout="pager.layout"
          :total="pager.total"
          :page-sizes="pager.pageSizes"
          :current-page.sync="pager.currentPage"
          :page-size.sync="pager.pageSize"
          @current-change="getTableData"
          @size-change="getTableData"
        >
        </el-pagination>
      </div>
    </div>
    <!-- <img src="../../assets/img/noData.png" alt="" v-else class="noData" /> -->
    <!-- 数据提交 -->
    <el-dialog
      title="数据提交"
      :visible.sync="containerPositionVisible"
      width="90%"
      class="dialog"
      @open="openDataFN"
      @close="closeFn"
    >
      <div class="top">
        <input
          type="text"
          readonly
          v-model="containerPosition"
          style="marginBottom:10px"
        />
      </div>
      <div class="tableXY" v-show="show">
        <ul>
          <li
            v-for="(item, index) of col"
            :key="item"
            style="width:10px;height:55px"
          >
            {{ Math.abs(index - col.length) }}
          </li>
        </ul>
        <div>
          <div class="con">
            <table
              border="1"
              width="90%"
              cellspacing="0"
              bordercolor="#000"
              id="tb_1"
              v-if="row.length > 1"
            >
              <tr v-for="(item, i) of col" :key="i">
                <td
                  v-for="(jiem, j) in row"
                  :key="j"
                  width="100px"
                  height="50px"
                  @click="clickTdFn($event, i, j)"
                  v-text="actionLight(i, j)"
                  :class="actionClass(i, j)"
                >
                  <!-- :style="i==newI&&j==newJ?'border:navy blue;':'borderColor:#000'" -->
                </td>
              </tr>
            </table>

            <table v-else>
              <tr v-for="i of 5" :key="i">
                <td v-for="j in 5" :key="j" width="100px" height="50px"></td>
              </tr>
            </table>
          </div>
          <ul style="display:flex">
            <li
              v-for="(item, index) in row"
              :key="item"
              style="width:100px;height:10px; "
            >
              {{ index + 1 }}
            </li>
          </ul>
        </div>
      </div>
      <el-form ref="dataForm" :model="dataForm" inline>
        <el-form-item label="车号" prop="vehicleNumberHeader">
          <el-col :span="10">
            <el-select
              v-model="dataForm.vehicleNumberHeader"
              clearable
              prop="vehicleNumberHeader"
              :disabled="
                searchForm.containerWorkingStatus == 'TRA' ||
                  searchForm.containerWorkingStatus == 'DRO'
              "
            >
              <el-option
                v-for="item in vehicleNumberHeaderOpts"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
            <el-input
              :placeholder="$t('message.PleaseEnter')"
              v-model="dataForm.vehicleNumberEnd"
              prop="vehicleNumberEnd"
              :disabled="
                searchForm.containerWorkingStatus == 'TRA' ||
                  searchForm.containerWorkingStatus == 'DRO'
              "
            >
              <el-button
                type="primary"
                slot="append"
                @click="vehicleNumberFn"
                :disabled="
                  searchForm.containerWorkingStatus == 'TRA' ||
                    searchForm.containerWorkingStatus == 'DRO'
                "
                >...</el-button
              >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="箱位" prop="containerLocation">
          <el-input v-model="dataForm.containerLocation" readonly> </el-input>
        </el-form-item>
        <el-form-item>
          <el-col :span="24" :class="this.dataForm.color">箱色</el-col>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="inStreetFn">街贝</el-button>
          <el-button type="primary" @click="RefFn">刷新</el-button>
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="upStackFN" :disabled="isUpDisabled"
            >上一贝</el-button
          >
          <el-button
            type="primary"
            @click="downStackFN"
            :disabled="isDownDisabled"
            >下一贝</el-button
          >
        </el-form-item>
        <el-form-item label=" ">
          <el-button type="primary" @click="dataSubmitFn">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 选择街 -->
    <el-dialog
      title="选择街"
      :visible.sync="streetVisible"
      width="90%"
      class="dialog"
    >
      <el-button
        type="primary"
        v-for="item in streetButtons"
        :key="item"
        @click="selectStackFn"
        >{{ item }}</el-button
      >
    </el-dialog>
    <!-- 选择贝-->
    <el-dialog
      title="选择贝"
      :visible.sync="stackVisible"
      width="90%"
      class="dialog"
    >
      <el-button
        type="primary"
        v-for="item in stackButtons"
        :key="item"
        @click="dataFn"
        >{{ item }}</el-button
      >
    </el-dialog>
    <!-- 车号 -->
    <el-dialog
      title="车号"
      :visible.sync="vehicleNumberVisible"
      width="90%"
      class="dialog"
      @open="openVehicleNumberFN"
    >
      <el-form ref="vehicleNumberForm" :model="vehicleNumberForm" inline>
        <el-form-item label="车号" prop="vehicleNumberHeader">
          <el-col :span="10">
            <el-select
              v-model="vehicleNumberForm.vehicleNumberHeader"
              clearable
            >
              <el-option
                v-for="item in vehicleNumberHeaderOpts"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
            <el-input
              :placeholder="$t('message.PleaseEnter')"
              v-model="vehicleNumberForm.vehicleNumberEnd"
              @focus="focusThree"
              readonly
            >
            </el-input>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchVehicleNumberFn"
            >查询
          </el-button>
          <el-button type="primary" @click="saveVehicleNumberFn"
            >选择</el-button
          >
        </el-form-item>
      </el-form>
      <div class="vehicleNumbertable">
        <!-- 车号列表 -->
        <el-table
          :data="vehicleNumberTableData"
          size="mini"
          highlight-current-row
          @row-click="vehicleNumbersClickFn"
          @close="vehicleNumberTableData = null"
        >
          <el-table-column prop="truckNo" label="车队"> </el-table-column>
          <el-table-column prop="vehicleNumberHeader" label="车牌头">
          </el-table-column>
          <el-table-column prop="vehicleNumberEnd" label="车号">
          </el-table-column>
        </el-table>
        <!-- 小键盘 -->
        <!-- <Keyboard class="keyboard" @strFn="strFn" :show="false" :width="100" /> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import Keyboard from "@/components/Keyboard";
export default {
  data() {
    return {
    //   containerYardNoOpts: this.$store.state.DicJson.container_yard_no, //
    //   containerWorkingStatusOpts: this.$store.state.DicJson.container_working_status,
      vehicleNumberHeaderOpts: ["辽A", "辽B", "辽C"],
      searchForm: {
        //搜索form
        containerYardNo: null,
        // containerWorkingStatus: this.$store.state.DicJson.container_working_status[0].dictKey,
        containerNo: "",
        resultStr: "", //结果箱号
      },
      streetButtons: [], //街
      stackButtons: [], //贝
      dataForm: {
        //数据提交
        vehicleNumber: null,
        vehicleNumberHeader: null,
        vehicleNumberEnd: null,
        containerLocation: null,
      },
      vehicleNumberForm: {
        //车号form
        truckNo: null,
        vehicleNumber: null,
        vehicleNumberHeader: null,
        vehicleNumberEnd: "",
      },
      row: [], //数据提交页面  行层
      col: [],
      isStr: "one", //判断输入框
      tableData: [], //初始页表格
      vehicleNumberTableData: [], //车号表格
      pager: {
        // 分页器
        layout: "total, sizes, prev, pager, next, jumper",
        total: 0,
        pageSizes: [10, 20, 30, 40],
        currentPage: 1,
        pageSize: 10,
      },
      containerPositionVisible: false, //数据提交弹窗
      vehicleNumberVisible: false,
      streetVisible: false,
      stackVisible: false,
      rowData: [], //表格单击获得数据
      street: null,
      stack: null,
      containerPosition: null, //数据提交页街贝展示
      // rowData: null,//行数据
      streetStackData: [],
      searchOUTvehicleNumber: null, //出场状态下 搜索车号
      resultDataTable: [],
      isUpDisabled: false,
      isDownDisabled: false,
      newI: null,
      newJ: null,
    };
  },
  components: {
    // Keyboard,
  },
  methods: {
    //刷新
    RefFn() {
      this.newJ = null;
      if (this.street) {
        //获取箱子信息
        setTimeout(() => {
          this.$http
            .post("/cy/planContainer/queryInfoList", {
              containerYardNo: this.searchForm.containerYardNo,
              street: this.street,
              stack: this.stack,
            })
            .then((res) => {
              if (res.code == 200) {
                //     this.stackButtons = res.data
                this.streetStackData = res.data;
              }
            });
        });
        //获取街贝行层数量
        this.$http
          .post("/md/cyConfig/selectRowAndFloor", {
            containerYardNo: this.searchForm.containerYardNo,
            street: this.street,
            // stack: this.stack,
          })
          .then((res) => {
            if (res.code == 200) {
              this.row = [];
              this.col = [];
              for (let i = 0; i < res.data.row; i++) {
                this.row.push(i);
              }
              for (let i = 0; i < res.data.floor; i++) {
                this.col.push(i);
              }
            }
          });
      }
    },
    //上一贝
    async upStackFN() {
      this.newI = null;
      this.newJ = null;
      if (this.containerPosition) {
        this.isDownDisabled = false;
        this.dataForm.containerLocation = null;
        let skack = this.containerPosition.substr(-3, 3);
        let street = this.containerPosition.substr(0, 3);
        // eslint-disable-next-line no-unused-vars
        let maxStreet;
        await this.$http
          .post("/md/cyConfig/selectStack", {
            containerYardNo: this.searchForm.containerYardNo,
            street: street,
          })
          .then((res) => {
            maxStreet = res.data;
            //获取箱子信息
            setTimeout(() => {
              let newStack =
                skack - 0 < 10 ? "00" + (skack - 1) : "0" + (skack - 1);
              this.$http
                .post("/cy/planContainer/queryInfoList", {
                  containerYardNo: this.searchForm.containerYardNo,
                  street: street,
                  stack: newStack,
                })
                .then((res) => {
                  if (res.code == 200) {
                    //     this.stackButtons = res.data
                    this.streetStackData = res.data;
                    this.containerPosition = street + newStack;
                  }
                });
            });
            //获取街贝行层数量
            this.$http
              .post("/md/cyConfig/selectRowAndFloor", {
                containerYardNo: this.searchForm.containerYardNo,
                street: street,
                // stack: this.stack,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.row = [];
                  this.col = [];
                  for (let i = 0; i < res.data.row; i++) {
                    this.row.push(i);
                  }
                  for (let i = 0; i < res.data.floor; i++) {
                    this.col.push(i);
                  }
                }
              });
          });
      }
    },
    async downStackFN() {
      this.newI = null;
      this.newJ = null;
      if (this.containerPosition) {
        this.isUpDisabled = false;
        this.dataForm.containerLocation = null;
        let skack = this.containerPosition.substr(-3, 3);
        let street = this.containerPosition.substr(0, 3);
        // eslint-disable-next-line no-unused-vars
        let maxStreet;
        await this.$http
          .post("/md/cyConfig/selectStack", {
            containerYardNo: this.searchForm.containerYardNo,
            street: street,
          })
          .then((res) => {
            maxStreet = res.data;
            //获取箱子信息
            setTimeout(() => {
              let newStack =
                skack - 0 < 10 ? "00" + (skack - 0 + 1) : "0" + (skack - 0 + 1);
              this.$http
                .post("/cy/planContainer/queryInfoList", {
                  containerYardNo: this.searchForm.containerYardNo,
                  street: street,
                  stack: newStack,
                })
                .then((res) => {
                  if (res.code == 200) {
                    //     this.stackButtons = res.data
                    this.streetStackData = res.data;
                    this.containerPosition = street + newStack;
                  }
                });
            });
            //获取街贝行层数量
            this.$http
              .post("/md/cyConfig/selectRowAndFloor", {
                containerYardNo: this.searchForm.containerYardNo,
                street: street,
                // stack: this.stack,
              })
              .then((res) => {
                if (res.code == 200) {
                  this.row = [];
                  this.col = [];
                  for (let i = 0; i < res.data.row; i++) {
                    this.row.push(i);
                  }
                  for (let i = 0; i < res.data.floor; i++) {
                    this.col.push(i);
                  }
                }
              });
          });
      }
    },
    //关闭车号弹窗
    // closevehicleNumberFn() {
    //     this.vehicleNumberTableData = null
    // },
    //车号按钮
    outvehicleNumberFn() {
      if (this.searchForm.containerWorkingStatus == "OUT") {
        if (this.searchForm.containerNo) {
          let q = Object.assign({}, this.searchForm, this.pager);
          // console.log(q);
          // 处理参数
          let s = {};
          {
            s.containerYardNo = q.containerYardNo ? q.containerYardNo : null;
            s.containerWorkingStatus = q.containerWorkingStatus
              ? q.containerWorkingStatus
              : null;
            s.vehicleNumber = q.containerNo ? q.containerNo : null;
          }
          // console.log('q=>', q)
          this.$http
            .post("/cy/containerInstruction/queryMobileInstructList", s)
            .then((res) => {
              // console.log(res);
              if (res.code == 200) {
                // 处理渲染逻辑
                this.pager.total = res.data.total;
                this.tableData = res.data;
                // 查询结果为空进行提示
                if (res.data.length === 0) {
                  this.$message({
                    message: "搜索结果为空",
                    type: "warning",
                  });
                }
              }
            });
        } else if (!this.searchForm.containerNo) {
          this.vehicleNumberVisible = true;
        }
      } else if (this.searchForm.containerWorkingStatus == "DRO") {
        //落箱

        let q = Object.assign({}, this.searchForm, this.pager);
        // console.log(q);
        // 处理参数

        let s = Object.assign({}, this.pager);
        {
          s.containerYardNo = q.containerYardNo ? q.containerYardNo : null;
          s.containerWorkingStatus = q.containerWorkingStatus
            ? q.containerWorkingStatus
            : null;
          s.vehicleNumber = q.containerNo ? q.containerNo : null;
        }
        // console.log('q=>', q)
        this.$http
          .post("/cy/containerInstruction/queryMobileInstructList", s)
          .then((res) => {
            // console.log(res);
            if (res.code == 200) {
              // 处理渲染逻辑
              this.pager.total = res.data.total;
              this.tableData = res.data;
              // 查询结果为空进行提示
              if (res.data.length === 0) {
                this.$message({
                  message: "搜索结果为空",
                  type: "warning",
                });
              }
            }
          });
      }
    },
    //数据提交关闭
    closeFn() {
      setTimeout(() => {
        this.$refs.dataForm.resetFields();
        this.rowData.containerNo = "";
      });
      this.containerPosition = null;
      this.row = [];
      this.col = [];
    },
    //结果中搜索
    resultSearchFn() {
      let resultData = [];
      this.resultDataTable.forEach((item) => {
        if (item.containerNo.includes(this.searchForm.resultStr)) {
          resultData.push(item);
        }
      });
      this.tableData = resultData;
    },
    //车号选择按钮
    saveVehicleNumberFn() {
      if (this.searchForm.containerWorkingStatus == "PIC") {
        //提箱
        this.vehicleNumberVisible = false;
      } else if (this.searchForm.containerWorkingStatus == "OUT") {
        //出厂
        let q = Object.assign({}, this.searchForm);
        {
          q.vehicleNumber = this.searchOUTvehicleNumber
            ? this.searchOUTvehicleNumber
            : null;
          q.containerYardNo = q.containerYardNo ? q.containerYardNo : null;
          q.containerWorkingStatus = q.containerWorkingStatus
            ? q.containerWorkingStatus
            : null;
        }
        this.$http
          .post("/cy/containerInstruction/queryMobileInstructList", q)
          .then((res) => {
            // console.log(res);
            if (res.code == 200) {
              this.pager.total = res.data.total;
              this.tableData = res.data;
              this.vehicleNumberVisible = false;
              // 查询结果为空进行提示
              if (res.data.length === 0) {
                this.$message({
                  message: "搜索结果为空",
                  type: "warning",
                });
              }
            }
          });
      }
    },
    //单击车表格行
    // eslint-disable-next-line no-unused-vars
    vehicleNumbersClickFn(row, column, cell, event) {
      if (this.searchForm.containerWorkingStatus == "PIC") {
        this.dataForm.vehicleNumberHeader = row.vehicleNumberHeader
          ? row.vehicleNumberHeader
          : null;
        this.dataForm.vehicleNumberEnd = row.vehicleNumberEnd
          ? row.vehicleNumberEnd
          : null;
        this.dataForm.vehicleNumber =
          row.vehicleNumberHeader && row.vehicleNumberEnd
            ? row.vehicleNumberHeader + row.vehicleNumberEnd
            : null;
      } else if (this.searchForm.containerWorkingStatus == "OUT") {
        this.searchOUTvehicleNumber =
          row.vehicleNumberHeader && row.vehicleNumberEnd
            ? row.vehicleNumberEnd + row.vehicleNumberEnd
            : null;
      }
    },
    //数据提交
    dataSubmitFn() {
      this.newJ = null;
      if (this.searchForm.containerWorkingStatus == "PIC") {
        //提箱
        if (
          this.dataForm.vehicleNumberHeader &&
          this.dataForm.vehicleNumberEnd
        ) {
          let q = Object.assign({}, this.dataForm);
          // 处理参数
          let s = {};
          {
            s.inboundPlanningNo =
              q.planningNo.substr(0, 1) == "I" ? q.planningNo : null;
            s.callOffPlanningNo =
              q.planningNo.substr(0, 1) == "C" ? q.planningNo : null;
            s.outboundPlanningNo =
              q.planningNo.substr(0, 1) == "O" ? q.planningNo : null;
            s.containerNo = q.containerNo ? q.containerNo : null;
            s.street = q.containerLocation
              ? q.containerLocation.substr(0, 3)
              : null;
            s.stack = q.containerLocation
              ? q.containerLocation.substr(3, 3)
              : null;
            s.row = q.containerLocation
              ? q.containerLocation.substr(6, 3)
              : null;
            s.floor = q.containerLocation
              ? q.containerLocation.substr(9, 1)
              : null;
            s.vehicleNumber =
              this.dataForm.vehicleNumberHeader + this.dataForm.vehicleNumberEnd
                ? this.dataForm.vehicleNumberHeader +
                  this.dataForm.vehicleNumberEnd
                : null;
            s.containerLocation = q.containerLocation
              ? q.containerLocation
              : null;
            s.planningType = q.planningType ? q.planningType : null;
          }
          this.$http
            .post("/cy/planContainer/infoPickUpSubmit", s)
            .then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message({
                  message: "提箱成功",
                  type: "success",
                });
                this.containerPositionVisible = false;
                this.$refs.dataForm.resetFields();
                this.tableData = null;
                this.row = null;
                this.col = null;
              }
            });
        }
      } else if (this.searchForm.containerWorkingStatus == "OUT") {
        //出场
        let q = Object.assign({}, this.rowData, this.dataForm);
        // 处理参数
        // console.log(q);
        let s = {};
        {
          s.inboundPlanningNo =
            q.planningNo.substr(0, 1) == "I" ? q.planningNo : null;
          s.callOffPlanningNo =
            q.planningNo.substr(0, 1) == "C" ? q.planningNo : null;
          s.outboundPlanningNo =
            q.planningNo.substr(0, 1) == "O" ? q.planningNo : null;
          s.containerNo = q.containerNo ? q.containerNo : null;
          s.vehicleNumber =
            q.vehicleNumberHeader && q.vehicleNumberEnd
              ? q.vehicleNumberHeader + q.vehicleNumberEnd
              : null;
          s.mac = "1";
        }
        this.$http.post("cy/planContainer/infoOutSubmit", s).then((res) => {
          if (res.code == 200) {
              console.log(1);
          }
        });
      } else if (this.searchForm.containerWorkingStatus == "TRA") {
        //搬移
        let q = Object.assign({}, this.rowData, this.dataForm);
        // console.log(q.planningNo.substr(0, 1));
        let s = {};
        {
          s.inboundPlanningNo =
            q.planningNo.substr(0, 1) == "I" ? q.planningNo : null;
          s.callOffPlanningNo =
            q.planningNo.substr(0, 1) == "C" ? q.planningNo : null;
          s.outboundPlanningNo =
            q.planningNo.substr(0, 1) == "O" ? q.planningNo : null;
          s.containerNo = q.containerNo ? q.containerNo : null;
          s.street = q.containerLocation
            ? q.containerLocation.substr(0, 3)
            : null;
          s.stack = q.containerLocation
            ? q.containerLocation.substr(3, 3)
            : null;
          s.row = this.dataForm.containerLocation
            ? this.dataForm.containerLocation.substr(6, 3)
            : null;
          s.floor = this.dataForm.containerLocation
            ? this.dataForm.containerLocation.substr(9, 1)
            : null;
          s.vehicleNumber = q.vehicleNumber ? q.vehicleNumber : null;
          s.containerLocation = q.containerLocation
            ? q.containerLocation
            : null;
          s.planningType = q.planningType ? q.planningType : null;
          s.mac = "1";
          s.guid = q.guid ? q.guid : null;
        }
        // if (this.rowData.containerLocation != this.dataForm.containerLocation) {
        this.$http.post("/cy/planContainer/infoMoveSubmit", s).then((res) => {
          if (res.code == 200) {
            if (res.code == 200) {
              this.$message({
                message: "搬移成功",
                type: "success",
              });
              this.containerPositionVisible = false;
              this.$refs.dataForm.resetFields();
              this.tableData = null;
              this.row = null;
              this.col = null;
            }
          }
        });

        // }
      } else if (this.searchForm.containerWorkingStatus == "DRO") {
        //落箱
        let q = Object.assign({}, this.rowData, this.dataForm);
        // console.log(q.planningNo.substr(0, 1));
        console.log(1);

        let s = {};
        {
          s.inboundPlanningNo =
            q.planningNo.substr(0, 1) == "I" ? q.planningNo : null;
          s.callOffPlanningNo =
            q.planningNo.substr(0, 1) == "C" ? q.planningNo : null;
          s.outboundPlanningNo =
            q.planningNo.substr(0, 1) == "O" ? q.planningNo : null;
          s.containerNo = q.containerNo ? q.containerNo : null;
          s.street = this.street ? this.street : null;
          s.stack = this.stack ? this.stack : null;
          s.row = this.dataForm.containerLocation
            ? this.dataForm.containerLocation.substr(6, 3)
            : null;
          s.floor = this.dataForm.containerLocation
            ? this.dataForm.containerLocation.substr(9, 1)
            : null;
          s.vehicleNumber = q.vehicleNumber ? q.vehicleNumber : null;
          s.containerLocation = q.containerLocation
            ? q.containerLocation
            : null;
          s.planningType = q.planningType ? q.planningType : null;
          s.mac = "1";
        }
        if (s.containerLocation) {
          this.$http.post("/cy/planContainer/infoDownSubmit", s).then((res) => {
            if (res.code == 200) {
              if (res.code == 200) {
                this.$message({
                  message: "落箱成功",
                  type: "success",
                });
                this.containerPositionVisible = false;
                this.searchFn();
                setTimeout(() => {
                  this.$refs.dataForm.resetFields();
                });
                this.row = [];
                this.col = [];
              }
            }
          });
        } else {
          this.$message({
            message: "请选择箱位",
            type: "error",
          });
        }
      }
    },
    //街贝箱子内容
    actionLight(_i, _j) {
      let _r = "";
      this.streetStackData.forEach((item) => {
        if (item.row == _j + 1 && item.floor == this.row.length - _i - 1) {
          _r = ` ${item.containerNo ? item.containerNo : ""} /${
            item.emptyOrHeavy ? item.emptyOrHeavy : ""
          }/${item.containerOwner ? item.containerOwner : ""}`;
        }
      });
      return _r;
    },
    //街贝箱子颜色
    actionClass(i, j) {
      let r = "";
      this.streetStackData.forEach((item) => {
        if (item.row == j + 1 && item.floor == this.row.length - i - 1) {
          r = item.color;
        }
      });
      if (this.newI == i && this.newJ == j) {
        r += " border";
      }
      return r;
    },
    //打开数据提交
    // eslint-disable-next-line no-unused-vars
    openDataFN(e) {
      if (this.rowData != null) {
        console.log(this.searchForm.containerWorkingStatus);
        if (
          this.searchForm.containerWorkingStatus == "PIC" ||
          this.searchForm.containerWorkingStatus == "OUT"
        ) {
          console.log(1111);

          this.isDownDisabled = true;
          this.isUpDisabled = true;
        }

        if (
          this.searchForm.containerWorkingStatus == "PIC" ||
          this.searchForm.containerWorkingStatus == "OUT" ||
          this.searchForm.containerWorkingStatus == "TRA"
        ) {
          //提箱
          {
            this.dataForm = this.rowData;
            this.containerPosition = this.dataForm.containerLocation.substr(
              0,
              6
            );
            this.dataForm.color = this.rowData.color
              ? this.rowData.color
              : null;
          }
          setTimeout(() => {
            if (this.searchForm.containerWorkingStatus == "TRA") {
              this.dataForm.vehicleNumberEnd = null;
              this.dataForm.vehicleNumberHeader = null;
            }
          });
          console.log(this.dataForm);
          this.$http
            .post("/cy/planContainer/queryInfoList", {
              containerYardNo: this.dataForm.containerYardNo,
              street: this.dataForm.containerLocation
                ? this.dataForm.containerLocation.substr(0, 3)
                : "",
              stack: this.dataForm.containerLocation
                ? this.dataForm.containerLocation.substr(3, 3)
                : "",
            })
            .then((res) => {
              if (res.code == 200) {
                this.streetStackData = res.data;
                this.table = null;
              }
            });
          this.$http
            .post("/md/cyConfig/selectRowAndFloor", {
              containerYardNo: this.dataForm.containerYardNo,
              street: this.dataForm.containerLocation
                ? this.dataForm.containerLocation.substr(0, 3)
                : "",
            })
            .then((res) => {
              if (res.code == 200) {
                this.row = [];
                this.col = [];
                for (let i = 0; i < res.data.row; i++) {
                  this.row.push(i);
                }
                for (let i = 0; i < res.data.floor; i++) {
                  this.col.push(i);
                }
              }
            });
        } else if (
          this.searchForm.containerWorkingStatus == "DRO" &&
          this.rowData
        ) {
          //落箱
          let q = {};
          {
            q.vehicleNumber = this.rowData.vehicleNumber
              ? this.rowData.vehicleNumber
              : null;
            q.vehicleNumberEnd = this.rowData.vehicleNumberEnd
              ? this.rowData.vehicleNumberEnd
              : null;
            q.vehicleNumberHeader = this.rowData.vehicleNumberHeader
              ? this.rowData.vehicleNumberHeader
              : null;
            q.containerLocation = this.rowData.containerLocation
              ? this.rowData.containerLocation
              : null;
            q.color = this.rowData.color ? this.rowData.color : null;
          }
          this.dataForm = q;
        }
      }
    },
    //打开查询车号
    openVehicleNumberFN() {
      if (this.searchForm.containerNo) {
        this.$http
          .post("/md/truckInfo/queryListTruckNumber", {
            containerYardNo: "TCYD",
            truckNo: this.searchForm.containerNo,
          })
          .then((res) => {
            if (res.code == 200) {
              let truckList = [];
              let truck = {};
              // eslint-disable-next-line no-unused-vars
              res.data.forEach((item, i) => {
                truck.vehicleNumberHeader = item.substr(0, 2);
                truck.vehicleNumberEnd = item.substr(-5, 5);
                truckList.push(truck);
              });
              this.vehicleNumberTableData = truckList;
              console.log(truckList, this.vehicleNumberTableData);
            }
          });
      }
    },
    //获取可执行车号
    searchVehicleNumberFn() {
      if (this.searchForm.containerWorkingStatus == "PIC") {
        this.$http
          .post("/cy/containerInstruction/queryOutboundVehicleList", {
            vehicleNumber:
              this.vehicleNumberForm.vehicleNumberHeader &&
              this.vehicleNumberForm.vehicleNumberEnd
                ? this.vehicleNumberForm.vehicleNumberHeader +
                  this.vehicleNumberForm.vehicleNumberEnd
                : "",
          })
          .then((res) => {
            if (res.code == 200) {
              let truckList = [];
              // eslint-disable-next-line no-unused-vars
              res.data.forEach((item, i) => {
                let truck = {};
                truck.vehicleNumberHeader = item.substr(0, 2);
                truck.vehicleNumberEnd = item.substr(-5, 5);
                truckList.push(truck);
              });
              if (res.data.length === 0) {
                this.$message({
                  message: "搜索结果为空",
                  type: "warning",
                });
              }
            }
          });
      } else if (this.searchForm.containerWorkingStatus == "OUT") {
        this.$http
          .get("/cy/containerInstruction/queryOutboundVehicleList", {
            vehicleNumber:
              this.vehicleNumberForm.vehicleNumberHeader &&
              this.vehicleNumberForm.vehicleNumberEnd
                ? this.vehicleNumberForm.vehicleNumberHeader +
                  this.vehicleNumberForm.vehicleNumberEnd
                : "",
          })
          .then((res) => {
            if (res.code == 200) {
              let truckList = [];
              // eslint-disable-next-line no-unused-vars
              res.data.forEach((item, i) => {
                let truck = {};
                truck.vehicleNumberHeader = item.substr(0, 2);
                truck.vehicleNumberEnd = item.substr(-5, 5);
                truckList.push(truck);
              });
              this.vehicleNumberTableData = truckList;
              if (res.data.length === 0) {
                this.$message({
                  message: "搜索结果为空",
                  type: "warning",
                });
              }
            }
          });
      }
    },
    //...按钮
    vehicleNumberFn() {
      if (this.searchForm.containerWorkingStatus == "PIC") {
        this.vehicleNumberVisible = true;
      }
    },
    //点击单元格
    clickTdFn($event, i, j) {
      let e = $event;
      console.log(e);
      this.newJ = j;
      this.newI = i;
      // eslint-disable-next-line no-unused-vars
      let row = j;
      // eslint-disable-next-line no-unused-vars
      let flor = i;
      if (
        this.searchForm.containerWorkingStatus == "DRO" ||
        this.searchForm.containerWorkingStatus == "TRA"
      ) {
        this.dataForm.containerLocation =
          this.containerPosition +
          (j + 1 < 10 ? "00" + (j + 1) : "0" + (j + 1)) +
          (this.row.length - i - 1);
        // e.target.style.backgroundColor = 'grey'
      }
    },
    // 进入街贝
    inStreetFn() {
      this.newJ = null;
      if (
        this.searchForm.containerWorkingStatus == "DRO" ||
        this.searchForm.containerWorkingStatus == "TRA"
      ) {
        this.streetVisible = true;
        this.$http
          .post("/md/cyConfig/selectStreet", {
            containerYardNo: this.searchForm.containerYardNo,
          })
          .then((res) => {
            if (res.code == 200) {
              this.streetButtons = res.data;
            }
          });
      }
    },
    //选择街
    selectStackFn(val) {
      this.street = val.toElement.innerText;
      this.stackVisible = true;
      this.$http
        .post("/md/cyConfig/selectStack", {
          containerYardNo: this.searchForm.containerYardNo,
          street: val.toElement.innerText,
        })
        .then((res) => {
          if (res.code == 200) {
            // this.stackButtons = res.data
            this.stackButtons = [];
            for (let i = 0; i < res.data; i++) {
              let j = i < 9 ? "00" + (i + 1) : i >= 9 ? "0" + (i + 1) : "";
              this.stackButtons.push(j);
            }
          }
        });
    },
    //街贝信息
    dataFn(val) {
      this.stack = val.toElement.innerText;
      this.containerPosition = this.street + this.stack;
      this.vehicleNumberVisible = false;
      this.streetVisible = false;
      this.stackVisible = false;
      //获取箱子信息
      setTimeout(() => {
        this.$http
          .post("/cy/planContainer/queryInfoList", {
            containerYardNo: this.searchForm.containerYardNo,
            street: this.street,
            stack: this.stack,
          })
          .then((res) => {
            if (res.code == 200) {
              //     this.stackButtons = res.data
              this.streetStackData = res.data;
            }
          });
      });
      //获取街贝行层数量
      this.$http
        .post("/md/cyConfig/selectRowAndFloor", {
          containerYardNo: this.searchForm.containerYardNo,
          street: this.street,
          // stack: this.stack,
        })
        .then((res) => {
          if (res.code == 200) {
            this.row = [];
            this.col = [];
            for (let i = 0; i < res.data.row; i++) {
              this.row.push(i);
            }
            for (let i = 0; i < res.data.floor; i++) {
              this.col.push(i);
            }
          }
        });
    },
    //点击数据提交一行
    // eslint-disable-next-line no-unused-vars
    rowClickFn(row, column, cell, event) {
      this.rowData = [];
      let q = Object.assign({}, row);
      {
        q.vehicleNumberHeader = q.vehicleNumber
          ? q.vehicleNumber.substr(0, 2)
          : null;
        q.vehicleNumberEnd = q.vehicleNumber
          ? q.vehicleNumber.substr(-5, 5)
          : null;
      }
      this.rowData = q;
    },
    //显示隐藏数据提交
    dataPositionFn() {
      if (this.rowData != null) {
        this.containerPositionVisible = true;
      }
    },
    //input添加属性
    setFn() {
      let input = document.getElementById("conIup");
      input.setAttribute("readonly", "true");
      let input1 = document.getElementById("resIup");
      input1.setAttribute("readonly", "true");
    },
    //删除Input属性
    removeFn() {
      let input = document.getElementById("conIup");
      input.removeAttribute("readonly");
      let input1 = document.getElementById("resIup");
      input1.removeAttribute("readonly");
    },
    //键盘传参
    strFn(val) {
      if (val) {
        this.$nextTick(() => {
          if (this.isStr == "one") {
            this.$refs.conIup.focus();
          } else if (this.isStr == "two") {
            this.$refs.resIup.focus();
          }
        });
      }
      if (this.isStr == "one") {
        // console.log(this.isStr);
        if (val !== "del") {
          this.searchForm.containerNo += val;
        } else if (val == "del") {
          if (
            this.searchForm.containerNo &&
            this.searchForm.containerNo.length >= 1
          ) {
            let length = this.searchForm.containerNo.length;
            this.searchForm.containerNo = this.searchForm.containerNo.substr(
              0,
              length - 1
            );
          }
        }
      } else if (this.isStr == "two") {
        if (val !== "del") {
          this.searchForm.resultStr += val;
        } else if (val == "del") {
          if (
            this.searchForm.resultStr !== "" &&
            this.searchForm.resultStr.length >= 1
          ) {
            let length = this.searchForm.resultStr.length;
            this.searchForm.resultStr = this.searchForm.resultStr.substr(
              0,
              length - 1
            );
          }
        }
      } else if (this.isStr == "three") {
        if (val !== "del") {
          this.vehicleNumberForm.vehicleNumberEnd += val;
        } else if (val == "del") {
          if (
            this.vehicleNumberForm.vehicleNumberEnd !== "" &&
            this.vehicleNumberForm.vehicleNumberEnd.length >= 1
          ) {
            let length = this.vehicleNumberForm.vehicleNumberEnd.length;
            this.vehicleNumberForm.vehicleNumberEnd = this.vehicleNumberForm.vehicleNumberEnd.substr(
              0,
              length - 1
            );
          }
        }
      }
    },
    // 搜索
    searchFn() {
      this.$refs.searchForm.validate((valid) => {
        if (valid) {
          let q = Object.assign({}, this.searchForm, this.pager);
          // 处理参数
          {
            q.containerYardNo = q.containerYardNo ? q.containerYardNo : null;
            q.containerWorkingStatus = q.containerWorkingStatus
              ? q.containerWorkingStatus
              : null;
            q.containerNo = q.containerNo ? q.containerNo : null;
          }
          // console.log('q=>', q)
          this.$http
            .post("/cy/containerInstruction/queryMobileInstructList", q)
            .then((res) => {
              if (res.code == 200) {
                // 处理渲染逻辑
                this.pager.total = res.data.total;
                this.tableData = res.data;
                this.resultDataTable = res.data;
                // 查询结果为空进行提示
                if (res.data.length === 0) {
                  this.$message({
                    message: "搜索结果为空",
                    type: "warning",
                  });
                }
              }
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //重置表单
    resetSearchForm() {
      // this.$refs.searchForm.resetFields();
      // 请求列表
      // this.getTableData()
      this.searchForm.resultStr = "";
      this.searchForm.containerNo = "";
      this.rowData = null;
      this.tableData = [];
    },
    //获取键盘焦点
    focusOne() {
      this.isStr = "";
      this.isStr = "one";
    },
    focusTwo() {
      this.isStr = "";
      this.isStr = "two";
    },
    focusThree() {
      this.isStr = "";
      this.isStr = "three";
    },
    getTableData() {
      let q = Object.assign({}, this.pager);
      // 处理参数
      this.$http
        .post("/cy/containerInstruction/queryMobileInstructList", q)
        .then((res) => {
          if (res.code == 200) {
            // 处理渲染逻辑
            this.pager.total = res.data.total;
            this.tableData = res.data;
          }
        });
    },
  },
  computed: {
    lang() {
      return this.$store.state.lang;
    },
    show() {
      if (
        this.searchForm.containerWorkingStatus == "DRO" &&
        !this.col.length > 1
      ) {
        return false;
      } else {
        return true;
      }
    },
  },
  watch: {
    "dataForm.vehicleNumber"(val) {
      if (val) {
        this.dataForm.vehicleNumberHeader = this.dataForm.vehicleNumber
          ? this.dataForm.vehicleNumber.substr(0, 2)
          : "";
        this.dataForm.vehicleNumberEnd = this.dataForm.vehicleNumber
          ? this.dataForm.vehicleNumber.substr(-5, 5)
          : "";
      }
    },
    // eslint-disable-next-line no-unused-vars
    "searchForm.containerWorkingStatus"(val) {
      this.tableData = [];
      this.rowData = null;
    },
    containerPosition(val) {
      if (val) {
        // console.log(val);
        let skack = val.substr(-3, 3);
        let street = val.substr(0, 3);
        let maxStreet;
        this.$http
          .post("/md/cyConfig/selectStack", {
            containerYardNo: this.searchForm.containerYardNo,
            street: street,
          })
          .then((res) => {
            maxStreet = res.data > 9 ? "0" + res.data : "00" + res.data;
            if (
              this.searchForm.containerWorkingStatus == "TRA" ||
              this.searchForm.containerWorkingStatus == "DRO"
            ) {
              if (maxStreet == skack) {
                this.isDownDisabled = true;
                this.isUpDisabled = false;
              } else if (skack == "001") {
                this.isUpDisabled = true;
                this.isDownDisabled = false;
              } else {
                this.isUpDisabled = false;
                this.isDownDisabled = false;
              }
            } else {
              console.log(2);
              this.isUpDisabled = true;
              this.isDownDisabled = true;
            }
          });
      }
    },
  },
  mounted() {
    let Tabl = document.querySelector(".el-table__body");
    Tabl.onmousedown = () => {
      Tabl.onmousemove = (e) => {
        let X = e.movementX;
        document.querySelector(".el-table__body-wrapper").scrollLeft -= X;
      };
      //  抬起时
      Tabl.onmouseup = () => {
        // console.log(e);
        Tabl.onmousemove = null;
        Tabl.onmouseup = null;
      };
    };
  },
};
</script>

<style lang="scss" scoped>
//表单
.form {
  background: rgb(255, 255, 255);
  border-radius: 5px;
  padding: 5px;
  margin-bottom: 20px;
}

// 列表
.table {
  //表头
  .header {
    color: #000;
    display: flex;
    padding: 10px;
    justify-content: space-between;
    .upload {
      display: inline-block;
      padding: 0 10px;
    }
  }
  // 分页器
  .pagination {
    text-align: right;
    padding: 15px 25px;
  }
  .table {
    font-size: 14px !important; //设置固定的字体大小
  }
}

.tableXY {
  //   border: 1px solid #ccc;
  //   white-space: nowrap;
  text-align: center;
  overflow: auto;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  overflow-x: auto;
  i {
    display: inline-block;
    width: 10px;
    font-weight: normal;
    font-style: normal;
  }
  span {
    display: inline-block;
    width: 100px;
    height: 50px;
    border: 1px solid #000;
  }
  td {
    font-size: 12px;
  }
}
.top {
  display: flex;
  align-items: center;
  justify-content: center;

  input {
    height: 30px;
  }
}
.vehicleNumbertable {
  display: flex;
  justify-content: space-between;
}
::v-deep .dialog .el-dialog__body {
  padding: 0 20px !important;
}
::v-deep .el-dialog {
  min-height: 70% !important;
}
::v-deep .red {
  background: red;
}
::v-deep .yellow {
  background: yellow;
}
::v-deep .blue {
  background: blue;
}
::v-deep .green {
  background: green;
}
::v-deep .haveContainer {
  width: 100%;
  height: 100% !important;
  line-height: 100%;
}
.border {
  border: 5px solid skyblue;
  box-sizing: border-box;
}
</style>
